<template>
  <div>
    <div>nestedProp111 === {{ nestedProp }}</div>
    <div>nestedProp2 = {{ nestedProp2 }}</div>
    <div>obj.first.second = {{ optionalChaining(obj, "first", "second") }}</div>
    <div>d = {{ d }}</div>
    <div>e = {{ e }}</div>
    <div>f = {{ f }}</div>
    <div>g = {{ g }}</div>
    <div>h = {{ h }}</div>
    <div>i = {{ i }}</div>
    <div>k = {{ k }}</div>
    <div>l = {{ l }}</div>
    <div>Promise.all = {{ PromiseAll }}</div>
    <div>Promise.all.error = {{ PromiseAllError }}</div>
    <div>Promise.allSettled = {{ PromiseAllSettled }}</div>
    <div>Promise.allSettled.error = {{ PromiseAllSettledError }}</div>
    <div>Promise.any = {{ PromiseAny }}</div>
    <div>Promise.any.error = {{ PromiseAnyError }}</div>
    <div>Promise.Race = {{ PromiseRace }}</div>
    <div>Promise.Race.error = {{ PromiseRaceError }}</div>
    <div>newStr1 = {{ newStr1 }}</div>
    <div>newStr2 = {{ newStr2 }}</div>
    <div>newStr3 = {{ newStr3 }}</div>
    <div>newObj1 = {{ newObj1 }}</div>
    <div>newObj2 = {{ newObj2 }}</div>
    <div @click="addModule">Dynamic import</div>
    <div><img :src="images" /></div>
  </div>
</template>
<script>
import { optionalChaining } from "utils-cacalot";
// import m from './components/asyncModule.vue'
export default {
  data() {
    return {
      nestedProp: {},
      nestedProp2: {},
      obj: {},
      d: "1",
      e: "2",
      f: "3",
      g: "",
      h: "",
      i: "",
      k: "",
      l: "",
      PromiseAllSettled: "",
      PromiseAllSettledError: "",
      PromiseAll: "",
      PromiseAllError: "",
      PromiseAny: "",
      PromiseAnyError: "",
      PromiseRace: "",
      PromiseRaceError: "",
      newStr1: "",
      newStr2: "",
      newStr3: "",
      images: "",
      newObj1: "",
      newObj2: "",
    };
  },
  mounted() {
    /**
     * 可选链操作符（Optional Chaining）
     */

    const obj = {
      first: {
        second: 2,
      },
    };
    const obj2 = {};
    const nestedProp = obj?.first?.second; // 2
    const nestedProp2 = obj2?.first?.second; //undefined

    console.log(nestedProp, nestedProp2);
    this.nestedProp = nestedProp;
    this.nestedProp2 = nestedProp2;
    this.obj = obj;

    /**
     * 空位合并操作符 ？？
     * @description (0, '', false) 判断为 true
     */
    const a = undefined;
    const b = null;
    const c = 0;
    const j = false;

    this.d = a ?? 1; // 1
    this.e = a || 1; // 1
    this.f = b ?? 1; // 1
    this.g = b || 1; // 1
    this.h = c ?? 1; // 0
    this.i = c || 1; // 1
    this.k = j ?? 1; // false
    this.l = j || 1; // 1
    // 等价于let c = a !== undefined && a !== null ? a : b;

    const PromiseList = [
      new Promise((resolve, reject) => setTimeout(reject, 400, "Four")),
      new Promise((resolve, reject) => setTimeout(resolve, 1000, "Third")),
      new Promise((resolve, reject) => setTimeout(reject, 200, "Second")),
      new Promise((resolve, reject) => setTimeout(resolve, 2000, "First")),
    ];
    // 等待所有都完成（或第一个失败）
    Promise.all(PromiseList)
      .then((responses) => {
        console.log("responses",responses);
        this.PromiseAll = JSON.stringify(responses);
      })
      .catch((e) => {
        console.log(" Promise.all", e);
        this.PromiseAllError = JSON.stringify(e);
      }); // "Four"

    Promise.allSettled(PromiseList).then((res) => {
      console.log("allSettled", res);
       // [
       //    {"status":"rejected","reason":"Four"},
       //    {"status":"fulfilled","value":"Third"},
       //    {"status":"rejected","reason":"Second"},
       //    {"status":"fulfilled","value":"First"}
       // ]

      this.PromiseAllSettled = JSON.stringify(res);
    }).catch((e) => {
        console.log(" Promise.allSettled", e);
        this.PromiseAllSettledError = JSON.stringify(e);
      }); // ;

    Promise.any(PromiseList)
      .then((value) => {
        console.log(`PromiseAny: ${value}`);
        this.PromiseAny = value;
      }) // Result: Third
      .catch((err) => {
        this.PromiseAnyErr = err;
        console.log(err);
      });
    // 返回第一个有结果的
    Promise.race(PromiseList)
      .then((value) => {
        console.log(`PromiseRace: ${value}`);
        this.PromiseRace = value;
      })
      .catch((err) => {
        this.PromiseRaceError = JSON.stringify(err);
        console.log(err);
      });

    const str = "Linda is a self-taught developer.Linda will rule the world";

    this.newStr1 = str.replace("Linda", "Micheal");
    //output: Micheal is a self-taught developer.Linda will rule the world
    this.newStr2 = str.replace(/Linda/g, "Micheal");
    //output: Micheal is a self-taught developer.Micheal will rule the world
    this.newStr3 = str.replaceAll("Linda", "Micheal");
    //output: Micheal is a self-taught developer.Micheal will rule the world
    console.log("int", 9007199254740992 === 9007199254740993); // -> true

    const aNumber = 9007199254740993; // 9007199254740992
    const aBigInt = BigInt(90071992547409911); // 90071992547409904n
    const type = typeof aBigInt; // bigint
    const typeNumber = typeof aNumber; // number

    let num1 = 5;
    let num2 = 10;
    num1 &&= num2;
    let num3 = 5;
    let num4 = 10;
    num3 ||= num4;
    let num5;
    let num6 = 10;
    num5 ??= num6;
    console.log("num5", num5); // 10
    num5 = false;
    num5 ??= num6;
    console.log("num5", num5); // false
    console.log("num1", num1); // 10
    console.log("num3", num3); // 5

    let number = 100_00_00_00;
    console.log(number);
    /**** Output ****/
    // 100000
    let newObj;
    const arr = ["Pen", "Pencil", "Paper"];
    newObj = new Intl.ListFormat("en", {
      style: "short",
      type: "conjunction",
    });
    this.newObj1 = JSON.stringify(newObj.format(arr));
    console.log(this.newObj);
    /**** Output ****/
    // Pen, Pencil, & Paper

    newObj = new Intl.ListFormat("en", { style: "long", type: "conjunction" });
    this.newObj2 = JSON.stringify(newObj.format(arr));
    console.log(this.newObj);
    /**** Output ****/
    // Pen, Pencil, and Paper

    // Time only with short format
    let o = new Intl.DateTimeFormat("en", { timeStyle: "short" });
    console.log(o.format(Date.now()));
    // 11:27 PM
  },

  methods: {
    optionalChaining,
    /**
     * 长链型template
     * @date 2021-06-15
     * @param {any} obj 输入的数组对象
     * @param {any} ...rest 链型字段
     * @returns {any}
     */
    optionalChainingFunction(obj, ...rest) {
      let tmp = obj;
      for (const key in rest) {
        const name = rest[key];
        tmp = tmp?.[name];
      }

      return tmp || "";
    },
    RenderContent() {},
    async addModule() {
      const module = await import("@/assets/images/401_images/401.gif");
      console.log("module", module);
      this.images = module.default;
    },
  },
};
</script>
